<template>
	<div class="banner" :class="'terminal' + terminal">
		<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true"
			style="height: 370upx;width: 690upx;margin: 0 auto;" @change="swiperChange">
			<!-- @click="jumpLink(item.linkObj) -->
			<swiper-item class="banner-item" v-for="(item,index) in banerBGimgList" :key="index">
				<img class="img" :src="item" mode="widthFix">
			</swiper-item>
		</swiper>
		<view class="swiper-dots" v-if="banerBGimgList && banerBGimgList.length > 1">
			<text class="dot" :class="index === swiperCurrent  && 'dot-active'"
				v-for="(dot, index) in banerBGimgList.length" :key="index"></text>
		</view>
	</div>
</template>

<script>
	import {
		funMixin
	} from '../config/mixin'
	import api from '../config/api.js'
	export default {
		name: 'cereBanner',
		mixins: [funMixin],
		data() {
			return {
				bannerHeight: 0,
				swiperCurrent: 0,
				banerBGimgList:[]
			}
		},
		props: {
			terminal: {
				type: Number,
				default: 4
			},
			componentContent: {
				type: Object
			}
		},
		mounted() {
			this.getbanner()
			// this.bannerListget = this.getbanner().bannerList
			this.bannerHeight = this.componentContent.height
			this.$forceUpdate() // 刷新轮播图
		},
		computed: {
			// bannerList: function () {
			//   console.log(this.componentContent)
			//   return this.componentContent.bannerData.filter(function (item) {
			//     return item.bannerUrl
			//   })
			// }
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			getbanner(){
				let _ = this
				_.sendReq({
				  url: `${api.theme}`,
				  method: 'GET'
				}, (proRes) => {
				  console.log(proRes,'轮播图')
				  this.banerBGimgList = proRes.data.bannerList
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		position: relative;
		margin-top: 44upx;

		.banner-item {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: auto 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		&.terminal4 {
			::v-deep .el-carousel {
				height: 100%;

				.el-carousel__container {
					height: 100%;
				}
			}

			.banner-item {
				background-repeat: no-repeat;
				background-position: center;
				background-size: auto 100%;

				img {
					display: none;
				}
			}
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20upx;
			z-index: 200;

			.dot {
				width: 12upx;
				height: 12upx;
				background: #FFFFFF;
				border-radius: 6upx;
				opacity: 0.2;
				margin: 0 10upx;
			}

			.dot-active {
				opacity: 1;
				width: 24upx;
			}
		}

	}
</style>
